<template>
  <div>
    <div class="search-box">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input
            v-model="searchData.title"
            clearable
            placeholder="请输入关键字"
          />
        </el-form-item>
        <el-form-item label="详情">
          <el-input
            v-model="searchData.introduce"
            clearable
            placeholder="请输入关键字"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList.comList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50px" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="introduce" label="详情" />
    </el-table>
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="prev, pager, next"
      :page-size="searchData.pagesize"
      :total="searchData.count"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
} from "vue";
import { getGoodsList } from "../request/api";

import { InitData, ListInt } from "../type/goods";

export default defineComponent({
  setup() {
    // 初始化响应数据对象
    const data = reactive(new InitData());

    onMounted(() => {
      getGoods();
    });

    // 通过分页参数计算要展示的数据
    const dataList = reactive({
      comList: computed(() => {
        // 1 ---> [1-10]
        // 2 ---> [11-20]
        // 3 ---> [21-30]
        const startPage: number =
          (data.searchData.page - 1) * data.searchData.pagesize;

        const endPage: number = data.searchData.page * data.searchData.pagesize;

        return data.list.slice(startPage, endPage);
      }),
    });

    // funcation
    const getGoods = () => {
      // 接口请求数据
      getGoodsList().then((res) => {
        //   console.log(res);
        // 将接口结果赋给变量
        data.list = res.data;
        data.searchData.count = res.data.length;
      });
    };

    const currentChange = (page: number) => {
      data.searchData.page = page;
    };

    const sizeChange = (pagesize: number) => {
      data.searchData.pagesize = pagesize;
    };

    const onSubmit = () => {
      // console.log(data.searchData.title)
      // console.log(data.searchData.introduce)
      let arr: ListInt[] = []; // 定义数组，用来接收查询过后要展示的数据
      if (data.searchData.title || data.searchData.introduce) {
        if (data.searchData.title) {
          arr = data.list.filter((value) => {
            return value.title.indexOf(data.searchData.title) !== -1;
          });
        }
        if (data.searchData.introduce) {
          arr = data.list.filter((value) => {
            return value.introduce.indexOf(data.searchData.introduce) !== -1;
          });
        }
      } else {
        arr = data.list;
      }
      // 查询后修改分页总数量
      data.searchData.count = arr.length;
      data.list = arr;
    };

    // 监听输入框内容为空时则复原数据
    watch(
      [
        () => {
          return data.searchData.title;
        },
        () => data.searchData.introduce,
      ],
      () => {
        console.log(data.searchData.title);
        if (!data.searchData.title && !data.searchData.introduce) {
          // 接口请求数据
          getGoods();
        }
      }
    );

    return { ...toRefs(data), dataList, currentChange, sizeChange, onSubmit };
  },
});
</script>

<style scoped></style>
